<template>
	<a-card class="application_item" hoverable @click.native="handleClickGoto">
		<a-button type="text" :status="itemData.isCollect ? 'warning' : ''" @click.stop="handleCollect">
			<icon-heart-fill :size="18" />
		</a-button>
		<icon-xigua-color :size="48" />
		<dl>
			<dt>{{ itemData.title }}</dt>
			<dd>{{ itemData.depart }}</dd>
		</dl>
		<span class="common" v-if="itemData.isCommon">常用</span>
	</a-card>
</template>

<script setup lang="ts">
interface Props {
	title: string;
	depart: string;
	isCommon: boolean;
	isCollect: boolean;
}
const props = defineProps({ data: { type: Object as PropType<Props>, default: () => {} } });
const itemData = ref<Props>(props.data);

const handleCollect = () => {
	itemData.value.isCollect = true;
};
const handleClickGoto = () => {
	console.log(itemData);
};
</script>

<style lang="scss" scoped>
.arco-card.application_item {
	cursor: pointer;
	border-radius: 4px;
	transition-property: all;
	border: solid 1px var(--color-neutral-3);
	&:hover {
		cursor: pointer;
		transform: translateY(-2px);
		border-color: rgb(var(--primary-6));
	}
	:deep(.arco-card-body) {
		display: flex;
		align-items: center;
		position: relative;
		padding: 16px;
	}
	.arco-btn {
		position: absolute;
		top: 6px;
		right: 6px;
		padding: 0;
		height: auto;
		color: #d6d6d6;
		&.arco-btn-status-warning {
			color: rgb(var(--warning-6));
		}
	}
	svg.arco-icon {
		flex-shrink: 0;
	}
	dl {
		flex: 1;
		line-height: 1;
		font-size: 15px;
		overflow: hidden;
		margin-left: 10px;
	}
	dt {
		overflow: hidden;
		margin-bottom: 10px;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	dd {
		color: #909399;
	}
	span.common {
		position: absolute;
		right: 0;
		bottom: 0;
		font-size: 12px;
		line-height: 18px;
		width: 32px;
		text-align: center;
		border-radius: 4px 0 0 0;
		color: #fff;
		background-color: rgb(var(--orangered-5));
	}
}
</style>
